<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">


  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <title>电影修改</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <style>

    #img img{
           width: 150px;
           height: 150px;
           object-fit: contain;
           border-radius: 5px;
           border:  1px solid gray;
         display: none;

       }
       .black{
         width: 150px;
         height: 30px;
         background:rgba(0, 0, 0, 0.5);
         position: absolute;
         top: 0px;
         border-radius: 5px 5px 0 0;
         display: none;

      
       }
       #img{
         position: relative;
         left: 100px;
         margin-top: 20px;
       }
       .close{
         float: right;
         font-size: 20px;
         display: none;
        
       }
  </style>
</head>

<body>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>
      <button data-target="student/newSelect.html" onclick="javascript:location.href='./movieSelect.html'" class="layui-btn layui-btn-sm">返回</button>
      修改电影
    </legend>
  </fieldset>

  <form class="layui-form" action="" onsubmit="return false" id="movie" lay-filter="movieEdit">
    <div class="layui-form-item">
      <label class="layui-form-label">电影名称</label>
      <div class="layui-input-inline">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">英文名称</label>
      <div class="layui-input-inline">
        <input type="text" name="ename" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">海报图</label>
      <button type="button" class="layui-btn" id="test1">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <input type="text" name="imgfile" placeholder="请输入" autocomplete="off" class="layui-input" id="getPath">

      <div id="img">
        <div class="black"><i class="layui-icon layui-icon-close close"></i></div>
        <img src="" alt="">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">电影类型</label>
      <div class="layui-input-block" name="type" id="typet">
        <input type="checkbox" title="爱情" name="爱情">
        <input type="checkbox" title="喜剧" name="喜剧">
        <input type="checkbox" title="动画" name="动画">
        <input type="checkbox" title="剧情" name="剧情">
        <input type="checkbox" title="恐怖" name="恐怖">
        <input type="checkbox" title="惊悚" name="惊悚">
        <input type="checkbox" title="科幻" name="科幻">
        <input type="checkbox" title="动作" name="动作">
        <input type="checkbox" title="悬疑" name="悬疑">
        <input type="checkbox" title="犯罪" name="犯罪">
        <input type="checkbox" title="冒险" name="冒险">
        <input type="checkbox" title="战争" name="战争">
        <input type="checkbox" title="奇幻" name="奇幻">
        <input type="checkbox" title="运动" name="运动">
        <input type="checkbox" title="家庭" name="家庭">
        <input type="checkbox" title="古装" name="古装">
        <input type="checkbox" title="武侠" name="武侠">
        <input type="checkbox" title="西部" name="西部">
        <input type="checkbox" title="历史" name="历史">
        <input type="checkbox" title="传记" name="传记">
        <input type="checkbox" title="歌舞" name="歌舞">
        <input type="checkbox" title="黑色电影" name="黑色电影">
        <input type="checkbox" title="短片" name="短片">
        <input type="checkbox" title="纪录片" name="纪录片">
        <input type="checkbox" title="其他" name="其他">




      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">首映地区</label>
      <div class="layui-input-block" name="area" id="areat">
        <input type="checkbox" title="中国大陆" name="中国大陆">
        <input type="checkbox" title="美国" name="美国">
        <input type="checkbox" title="韩国" name="韩国">
        <input type="checkbox" title="日本" name="日本">
        <input type="checkbox" title="中国香港" name="中国香港">
        <input type="checkbox" title="中国台湾" name="中国台湾">
        <input type="checkbox" title="泰国" name="泰国">
        <input type="checkbox" title="印度" name="印度">
        <input type="checkbox" title="法国" name="法国">
        <input type="checkbox" title="英国" name="英国">
        <input type="checkbox" title="俄罗斯" name="俄罗斯">
        <input type="checkbox" title="意大利" name="意大利">
        <input type="checkbox" title="西班牙" name="西班牙">
        <input type="checkbox" title="德国" name="德国">
        <input type="checkbox" title="波兰" name="波兰">
        <input type="checkbox" title="澳大利亚" name="澳大利亚">
        <input type="checkbox" title="伊朗" name="伊朗">
        <input type="checkbox" title="其他" name="其他">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">时长</label>
      <div class="layui-input-inline">
        <input type="text" name="time" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">上映时间</label>
      <div class="layui-input-inline">
        <input type="text" name="upDate" placeholder="请选择日期" id="test2" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">评分</label>
      <div class="layui-input-inline">
        <input type="text" name="score" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">票房</label>
      <div class="layui-input-inline">
        <input type="text" name="count" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">简介</label>
      <div class="layui-input-block">
        <textarea name="intro" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit="" lay-filter="*">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
  <script src="../js/lodash.min.js"></script>
  <script src="../layui/layui.js"></script>
  <script src="../js/jquery-1.12.4.min.js"></script>
  <script>






    $("#getPath").css("display", "none")
    layui.use(['form', 'layer', 'laydate'], async function () {

      const form = layui.form;
      const layer = layui.layer;
      const laydate = layui.laydate;

      const id = localStorage.getItem("movieid")
      const movie = await $.getJSON("/api/movie/" + id);
      form.val("movieEdit",movie.data)
      const a= movie.data.area.split(",")
      if(a.length==1){
        $("input[name='"+a[0]+"']").attr("checked", true)
      }
      else{
        for(let i=0;i<a.length-1;i++){
        $("input[name='"+a[i]+"']").attr("checked", true)
      }
      }
      const b= movie.data.type.split(",")
      if(b.length==1){
        $("input[name='"+b[0]+"']").attr("checked", true)
      }else{
        for(let i=0;i<b.length-1;i++){
        $("input[name='"+b[i]+"']").attr("checked", true)
      }
      }
      $("#img img").prop("src",movie.data.poster)       
          $(".black").show();
          $(".black i").show();
          $("#img img").show();
          $(".black i").click(function () {
            $("#img img").prop("src", "")
            $(".black").hide();
            $(".black i").hide();
            $("#img img").hide();
          })
      console.log(movie)
      laydate.render({
        elem: '#test2'
      });

      form.on('submit(*)', async function (data) {

        console.log(data.field)
        await $.ajax({
                        url: "/api/movie/" + id,
                        method: "put",
                        data: data.field
                    });
                    layer.msg('修改电影成功', {
                        icon: 1,
                        time: 1000
                    }, function () {
                      localStorage.removeItem("movieid")
                        window.location="./movieSelect.html";
                    });
        
      });
      form.render();
    });

      //监听提交



  </script>
  <script>
    layui.use('upload', function () {
      var upload = layui.upload;

      //执行实例
      var uploadInst = upload.render({
        elem: '#test1' //绑定元素
        , url: '/api/movieupload/' //上传接口
        , field: "imgfile"
        , acceptMime: "image/*"
        , size: 500
        , drage: true
        , done: function (res) {
          //上传完毕回调
          $("#img img").prop("src", res.data[0])
          $("#getPath").val(res.data[0])
          $(".black").show();
          $(".black i").show();
          $("#img img").show();
          $(".black i").click(function () {
            $("#img img").prop("src", "")
            $(".black").hide();
            $(".black i").hide();
            $("#img img").hide();
          })

        }
        , error: function () {
          //请求异常回调
          console.log("错误")
        }
      });
    });
  </script>
</body>

</html>